import React from 'react';
import { Button, Popover } from 'antd';
import { inject, observer } from 'mobx-react';
import { WeaSwitch, WeaTableNew } from 'comsMobx';
import { WeaTab, WeaTools, WeaFormItem, WeaSearchGroup, WeaLocaleProvider, WeaRightMenu } from 'ecCom';
import { toJS } from 'mobx';

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

@inject('reportStore')
@inject('reportDocDetailListDialogStore')
@observer
class ReportDocDetailListDialogComponent extends React.Component {
  componentWillReceiveProps (nextProps) {
    const { reportDocDetailListDialogStore } = this.props;
    if (this.props.searchParams !== nextProps.searchParams
      || this.props.status !== nextProps.status
      || this.props.key !== nextProps.key) {
      const { searchParams } = nextProps;
      const p2 = { echartKey: reportDocDetailListDialogStore.condition_key };
      Object.assign(searchParams, searchParams, p2);
      reportDocDetailListDialogStore.doSearch(searchParams);
    }
  }

  componentDidMount () {
    const { reportDocDetailListDialogStore } = this.props;
    reportDocDetailListDialogStore.buildSearchCondition();
    const { searchParams } = this.props;
    const p2 = { echartKey: reportDocDetailListDialogStore.condition_key };
    Object.assign(searchParams, searchParams, p2);
    reportDocDetailListDialogStore.doSearch(searchParams);
  }

  renderSearchAdForm () {
    const { reportDocDetailListDialogStore } = this.props;
    const conditioninfo = toJS(reportDocDetailListDialogStore.searchCondition.condition);
    const { form } = reportDocDetailListDialogStore;
    const { isFormInit } = form;
    let group = [];
    isFormInit && conditioninfo.map((c, index) => {
      let items = [];
      c.items.map((field) => {
        let col = 2;
        if (field.conditionType.toUpperCase() == WeaTools.types.CASCADER) col = 1;
        items.push({
          com: (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8dzfik@${field.domkey[0]}`}
              label={`${field.label}`}
              labelCol={{ span: `${field.labelcol}` }}
              ratio1to2
              error={form.getError(field)}
              tipPosition="bottom"
              wrapperCol={{ span: `${field.fieldcol}` }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ical8a@${field.domkey[0]}`} fieldConfig={field} form={form} onEnterSearch={this.doSearch} />
            </WeaFormItem>
          ),
          col,
          hide: form.isHide(field, () => false),
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@zdt8bg@${index}`} needTigger={false} showGroup={true} items={items} />);
    });
    return (<div>{group}</div>);
  }

  doSearch = () => {
    const { reportDocDetailListDialogStore } = this.props;
    const { searchParams } = this.props;
    const p2 = { status: reportDocDetailListDialogStore.condition_status };
    const p3 = { echartKey: reportDocDetailListDialogStore.condition_key };
    Object.assign(searchParams, searchParams, p2);
    Object.assign(searchParams, searchParams, p3);
    let tempSearchParams = Object.assign({}, searchParams, reportDocDetailListDialogStore.getFormParams());
    reportDocDetailListDialogStore.doSearch(tempSearchParams);
  }

  renderSearchAdButtons () {
    const { reportDocDetailListDialogStore } = this.props;
    return [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ui4dod@search`} type="primary" onClick={this.doSearch}>{getLabel('197', '搜索')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bdduyx@reset`} type="ghost" onClick={() => reportDocDetailListDialogStore.form.reset()}>{getLabel('2022', '重置')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x68lc7@cancel`} type="ghost" onClick={() => reportDocDetailListDialogStore.changeShowSearchAd(false)}>{getLabel('31129', '取消')}</Button>),
    ];
  }

  render () {
    const { reportDocDetailListDialogStore } = this.props;
    return (
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@e4ld5j`} datas={this.rightMenuDatas()}>
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@tsde56`}
          searchType={['base', 'advanced']} // 搜索类型
          showSearchAd={reportDocDetailListDialogStore.showSearchAd}
          setShowSearchAd={reportDocDetailListDialogStore.changeShowSearchAd}
          buttonsAd={this.renderSearchAdButtons()}
          searchsAd={this.renderSearchAdForm()}
          onSearch={this.doSearch}
          searchsBaseValue={reportDocDetailListDialogStore.getSearchsBaseValue()}
          onSearchChange={reportDocDetailListDialogStore.setSearchsBaseValue}
        />
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@c0cw3t`}
          hasOrder={true}
          needScroll={true}
          comsWeaTableStore={reportDocDetailListDialogStore.tableStore}
          getColumns={this.getColumns}
          scroll={{ y: 550 }}
        />
      </WeaRightMenu>
    );
  }

  getColumns = (columns) => {
    let newColumns = columns.map((column, index) => {
      if (column.dataIndex == 'id') {
        return {
          ...column,
          render: (text, record) => {
            let tableHtml = '  <table  style={{ width:400,height:120, border: 1 ,fontSize:12 }} cellSpacing="8" >';
            let popObjectArray = JSON.parse(record.odocinfospan);

            let colspanCount = 0;
            popObjectArray.forEach((popObject) => {
              if (colspanCount == 0) {
                tableHtml += '<tr>';
              }
              tableHtml += `<th colspan='${popObject.shownamecolspan}'>${popObject.showname}：</th>`;
              tableHtml += `<td width='350px' colspan='${popObject.showvaluecolspan}'>${popObject.showvalue}</td>`;
              colspanCount += Number.parseInt(popObject.shownamecolspan) + Number.parseInt(popObject.showvaluecolspan);
              if (colspanCount >= 2) {
                tableHtml += '</tr>';
                colspanCount = 0;
              }
            });
            tableHtml += '</table>';

            return (<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@dtg99d@${index}`}
              overlayClassName="wea-odoc-library-popover"
              placement="bottomLeft"
              content={<div dangerouslySetInnerHTML={{ __html: tableHtml }} />}
              trigger="hover"
            >
              <a dangerouslySetInnerHTML={{ __html: record.idspan }} />
            </Popover>);
          },
        };
      }
      return column;
    });

    return newColumns;
  }

  rightMenuDatas () {
    const datas = [
      {
        key: '1',
        icon: <i className="icon-coms-home" />,
        content: getLabel('32535', '显示列定制'),
        onClick: this.showCustomCol,
      },
    ];
    return datas;
  }

  showCustomCol = () => {
    const { tableStore } = this.props.reportDocDetailListDialogStore;
    tableStore.setColSetVisible(true);
    tableStore.tableColSet(true);
  }
}

export default ReportDocDetailListDialogComponent;
